<template>
  <view :style="{ display: vertical ? 'inline-block' : 'block' }">
    <view
      v-if="!vertical"
      class="tui-divider"
      :style="{ height: height + unit }"
    >
      <view
        class="tui-divider-line"
        :style="{
          width: width,
          background: getBgColor(gradual, gradualColor, dividerColor),
        }"
      ></view>
      <view
        class="tui-divider-text"
        :style="{
          color: color,
          fontSize: size + unit,
          lineHeight: size + unit,
          backgroundColor: backgroundColor,
          fontWeight: bold ? 'bold' : 'normal',
        }"
      >
        <slot></slot>
      </view>
    </view>
    <view
      v-else
      class="divider-vertical"
      :style="{ height: verHeight + unit, top: top }"
    ></view>
  </view>
</template>

<script>
export default {
  name: "tuiDivider",
  props: {
    //divider占据高度
    height: {
      type: Number,
      default: 100,
    },
    verHeight: {
      type: Number,
      default: 14,
    },
    //divider宽度，可填写具体长度，如400rpx
    width: {
      type: String,
      default: "100%",
    },
    //divider颜色，如果为渐变线条，此属性失效
    dividerColor: {
      type: String,
      default: "#e5e5e5",
    },
    //文字颜色
    color: {
      type: String,
      default: "#999",
    },
    unit: {
      type: String,
      default: "px",
    },
    //文字大小 px
    size: {
      type: Number,
      default: 12,
    },
    bold: {
      type: Boolean,
      default: false,
    },
    //背景颜色，和当前页面背景色保持一致
    backgroundColor: {
      type: String,
      default: "#F8F8F8",
    },
    //是否为渐变线条，为true，divideColor失效
    gradual: {
      type: Boolean,
      default: false,
    },
    //渐变色值，to right ，提供两个色值即可，由浅至深
    gradualColor: {
      type: Array,
      default: function () {
        return ["#eee", "#ccc"];
      },
    },
    vertical: {
      type: Boolean,
      default: false,
    },
    top: {
      type: String,
      default: "-1px",
    },
  },
  methods: {
    getBgColor: function (gradual, gradualColor, dividerColor) {
      let bgColor = dividerColor;
      if (gradual) {
        bgColor =
          "linear-gradient(to right," +
          gradualColor[0] +
          "," +
          gradualColor[1] +
          "," +
          gradualColor[1] +
          "," +
          gradualColor[0] +
          ")";
      }
      return bgColor;
    },
  },
};
</script>

<style scoped>
.tui-divider {
  width: 100%;
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}

.divider-vertical {
  margin: 0 8px;
  display: inline-block;
  width: 1px;
  vertical-align: middle;
  position: relative;
  color: #515a6e;
  background: #e8eaec;
}

.tui-divider-line {
  position: absolute;
  height: 1rpx;
  top: 50%;
  left: 50%;
  -webkit-transform: scaleY(0.5) translateX(-50%) translateZ(0);
  transform: scaleY(0.5) translateX(-50%) translateZ(0);
}

.tui-divider-text {
  position: relative;
  text-align: center;
  padding: 0 18rpx;
  z-index: 1;
}
</style>
